<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> new document </title>
    <meta name="generator" content="editplus"/>
    <meta name="author" content=""/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="jquery-1.8.3.min.js" type="text/javascript"></script>
</head>

<body>


<center>
    Welcome<br/><input id="text" type="text"/>
    <button onclick="send()">发送消息</button>
    <button onclick="login()">登陆</button>
    <button onclick="hello()">hello</button>


    <hr/>
    <button onclick="closeWebSocket()">关闭WebSocket连接</button>
    <hr/>
    <div id="message"></div>
</center>

</body>
<script type="text/javascript">
    var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        alert('当前浏览器支持 websocket');
        websocket = new WebSocket("ws://192.168.0.4:9090");
    } else {
        alert('当前浏览器 Not support websocket')
    }
    websocket.binaryType = 'arraybuffer';
    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("WebSocket连接发生错误");
    };
    //连接成功建立的回调方法
    websocket.onopen = function () {
        setMessageInnerHTML("WebSocket连接成功");
        window.setInterval(function () {
            websocket.send(" ");
        }, 2000);
    }
    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        console.log("event.data" + typeof event.data)

        setMessageInnerHTML("data:" + event.data);
    }
    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("WebSocket连接关闭");
    }
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }


    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        websocket.send(message);
    }

    // 模拟登录信息
    function login() {
        var user = {
            "user_name": "小明",
            "password": "123456"
        }
        var message = "500|500|" + JSON.stringify(user)
        websocket.send(message);
    }

    // 登录之后
    function hello() {
        var user = {
            "user_name": "小明",
            "password": "123456"
        }
        var message = "501|501|" + JSON.stringify(user)
        websocket.send(message);
    }


</script>
</html>